"use client"

import React from "react"

import { View, Text, StyleSheet, TouchableOpacity, Modal, Platform } from "react-native"
import { LinearGradient } from "expo-linear-gradient"
import { X, Headphones, PlayCircle, Repeat } from "lucide-react-native"
import { theme } from "../../constants/theme"

export interface ListeningSettings {
    mode: "simple" | "rich"
    playTimes: number
    loop: boolean
}

interface ListeningSettingsModalProps {
    visible: boolean
    settings: ListeningSettings
    onClose: () => void
    onConfirm: (settings: ListeningSettings) => void
}

export function ListeningSettingsModal({ visible, settings, onClose, onConfirm }: ListeningSettingsModalProps) {
    const [localSettings, setLocalSettings] = React.useState<ListeningSettings>(settings)

    React.useEffect(() => {
        setLocalSettings(settings)
    }, [settings])

    const handleConfirm = () => {
        onConfirm(localSettings)
        onClose()
    }

    return (
        <Modal visible={visible} transparent animationType="fade" onRequestClose={onClose}>
            <View style={styles.modalOverlay}>
                <View style={styles.modalContent}>
                    <View style={styles.modalHeader}>
                        <Text style={styles.modalTitle}>播放设置</Text>
                        <TouchableOpacity style={styles.modalCloseButton} onPress={onClose}>
                            <X size={24} color={theme.colors.neutral.darkGray} />
                        </TouchableOpacity>
                    </View>

                    {/* 播放模式 */}
                    <View style={styles.section}>
                        <View style={styles.sectionHeader}>
                            <Headphones size={20} color={theme.colors.primary.default} />
                            <Text style={styles.sectionTitle}>播放模式</Text>
                        </View>

                        <View style={styles.modeContainer}>
                            <TouchableOpacity
                                style={[styles.modeCard, localSettings.mode === "simple" && styles.modeCardActive]}
                                onPress={() => setLocalSettings({ ...localSettings, mode: "simple" })}
                            >
                                <View style={[styles.modeIcon, localSettings.mode === "simple" && styles.modeIconActive]}>
                                    <Text style={[styles.modeIconText, localSettings.mode === "simple" && styles.modeIconTextActive]}>
                                        简
                                    </Text>
                                </View>
                                <Text style={[styles.modeTitle, localSettings.mode === "simple" && styles.modeTitleActive]}>
                                    简单模式
                                </Text>
                                <Text style={styles.modeDescription}>单词 + 拆分 + 中文释义</Text>
                            </TouchableOpacity>

                            <TouchableOpacity
                                style={[styles.modeCard, localSettings.mode === "rich" && styles.modeCardActive]}
                                onPress={() => setLocalSettings({ ...localSettings, mode: "rich" })}
                            >
                                <View style={[styles.modeIcon, localSettings.mode === "rich" && styles.modeIconActive]}>
                                    <Text style={[styles.modeIconText, localSettings.mode === "rich" && styles.modeIconTextActive]}>
                                        丰
                                    </Text>
                                </View>
                                <Text style={[styles.modeTitle, localSettings.mode === "rich" && styles.modeTitleActive]}>
                                    丰富模式
                                </Text>
                                <Text style={styles.modeDescription}>单词 + 拆分 + 中文释义 + 例句</Text>
                            </TouchableOpacity>
                        </View>
                    </View>

                    {/* 播放次数 */}
                    <View style={styles.section}>
                        <View style={styles.sectionHeader}>
                            <PlayCircle size={20} color={theme.colors.primary.default} />
                            <Text style={styles.sectionTitle}>播放次数</Text>
                        </View>

                        <View style={styles.timesContainer}>
                            {[1, 2, 3].map((times) => (
                                <TouchableOpacity
                                    key={times}
                                    style={[styles.timeButton, localSettings.playTimes === times && styles.timeButtonActive]}
                                    onPress={() => setLocalSettings({ ...localSettings, playTimes: times })}
                                >
                                    <Text
                                        style={[styles.timeButtonText, localSettings.playTimes === times && styles.timeButtonTextActive]}
                                    >
                                        {times}次
                                    </Text>
                                </TouchableOpacity>
                            ))}
                        </View>
                    </View>

                    {/* 循环播放 */}
                    <View style={styles.section}>
                        <View style={styles.loopContainer}>
                            <View style={styles.loopLeft}>
                                <Repeat size={20} color={theme.colors.primary.default} />
                                <Text style={styles.loopText}>循环播放</Text>
                            </View>
                            <TouchableOpacity
                                style={[styles.loopSwitch, localSettings.loop && styles.loopSwitchActive]}
                                onPress={() => setLocalSettings({ ...localSettings, loop: !localSettings.loop })}
                            >
                                <View style={[styles.loopKnob, localSettings.loop && styles.loopKnobActive]} />
                            </TouchableOpacity>
                        </View>
                    </View>

                    {/* 确认按钮 */}
                    <TouchableOpacity style={styles.confirmButton} onPress={handleConfirm}>
                        <LinearGradient colors={theme.colors.primary.gradient} style={styles.confirmButtonGradient}>
                            <Text style={styles.confirmButtonText}>确定</Text>
                        </LinearGradient>
                    </TouchableOpacity>
                </View>
            </View>
        </Modal>
    )
}

const styles = StyleSheet.create({
    modalOverlay: {
        flex: 1,
        backgroundColor: "rgba(0, 0, 0, 0.5)",
        justifyContent: "center",
        alignItems: "center",
    },
    modalContent: {
        width: "90%",
        maxWidth: 400,
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.extraLarge,
        padding: theme.spacing.xl,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.3)",
                shadowOffset: { width: 0, height: 5 },
                shadowOpacity: 0.5,
                shadowRadius: 10,
            },
            android: {
                elevation: 10,
            },
        }),
    },
    modalHeader: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        marginBottom: theme.spacing.xl,
    },
    modalTitle: {
        fontSize: theme.fontSize.xl,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.primary.default,
    },
    modalCloseButton: {
        padding: theme.spacing.sm,
    },
    section: {
        marginBottom: theme.spacing.xl,
    },
    sectionHeader: {
        flexDirection: "row",
        alignItems: "center",
        marginBottom: theme.spacing.md,
    },
    sectionTitle: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
        marginLeft: theme.spacing.sm,
    },
    modeContainer: {
        flexDirection: "row",
        gap: theme.spacing.md,
    },
    modeCard: {
        flex: 1,
        backgroundColor: theme.colors.neutral.lightGray,
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.lg,
        alignItems: "center",
        borderWidth: 2,
        borderColor: "transparent",
    },
    modeCardActive: {
        backgroundColor: "rgba(91, 142, 244, 0.1)",
        borderColor: theme.colors.primary.default,
    },
    modeIcon: {
        width: 40,
        height: 40,
        borderRadius: 20,
        backgroundColor: theme.colors.neutral.white,
        alignItems: "center",
        justifyContent: "center",
        marginBottom: theme.spacing.sm,
    },
    modeIconActive: {
        backgroundColor: theme.colors.primary.default,
    },
    modeIconText: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.neutral.gray,
    },
    modeIconTextActive: {
        color: theme.colors.neutral.white,
    },
    modeTitle: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.darkGray,
        marginBottom: theme.spacing.xs,
    },
    modeTitleActive: {
        color: theme.colors.primary.default,
    },
    modeDescription: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.gray,
        textAlign: "center",
    },
    timesContainer: {
        flexDirection: "row",
        gap: theme.spacing.md,
    },
    timeButton: {
        flex: 1,
        backgroundColor: theme.colors.neutral.lightGray,
        borderRadius: theme.borderRadius.large,
        paddingVertical: theme.spacing.md,
        alignItems: "center",
    },
    timeButtonActive: {
        backgroundColor: "rgba(91, 142, 244, 0.1)",
    },
    timeButtonText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.darkGray,
    },
    timeButtonTextActive: {
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.semiBold,
    },
    loopContainer: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
    },
    loopLeft: {
        flexDirection: "row",
        alignItems: "center",
    },
    loopText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.black,
        marginLeft: theme.spacing.sm,
    },
    loopSwitch: {
        width: 50,
        height: 30,
        borderRadius: 15,
        backgroundColor: theme.colors.neutral.lightGray,
        padding: 2,
    },
    loopSwitchActive: {
        backgroundColor: theme.colors.primary.default,
    },
    loopKnob: {
        width: 26,
        height: 26,
        borderRadius: 13,
        backgroundColor: theme.colors.neutral.white,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.5,
                shadowRadius: 4,
            },
            android: {
                elevation: 2,
            },
        }),
    },
    loopKnobActive: {
        transform: [{ translateX: 20 }],
    },
    confirmButton: {
        borderRadius: theme.borderRadius.large,
        overflow: "hidden",
        marginTop: theme.spacing.lg,
        ...Platform.select({
            ios: {
                shadowColor: theme.colors.primary.default,
                shadowOffset: { width: 0, height: 3 },
                shadowOpacity: 0.3,
                shadowRadius: 5,
            },
            android: {
                elevation: 4,
            },
        }),
    },
    confirmButtonGradient: {
        paddingVertical: theme.spacing.lg,
        alignItems: "center",
        justifyContent: "center",
    },
    confirmButtonText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.white,
        fontWeight: theme.fontWeight.semiBold,
    },
})

